<template>
  <!-- 头部 -->
  <div class="title">
    <span class="first">
      部门与职位：<el-cascader v-model="bumenzhiwei" :options="options" :props="props" clearable />
    </span>
    <span class="name">
      姓名：<el-input v-model="seName" style="width: 240px" placeholder="搜索姓名" :suffix-icon="Search" />
    </span>
    <span class="switch">
      <el-switch v-model="value1" :active-text="text1" :inactive-text="text2" />
    </span>
  </div>

  <!-- 数据展示 -->
  <div class="card">
    <!-- 数据总体 -->
    <div class="card-item" v-for="(item, index) in filteredPlans" :key="item.id">
      <table>
        <tr>
          <td class="idStyle">{{ item.eid }}</td>
          <td class="nameStyle">{{ item.name }}</td>
          <td class="dianStyle">
            <button @click="seeDetail(item.id)" v-if="item.status" class="see">
              <el-icon>
                <View />
              </el-icon>
            </button>
            <button @click="add(item.id)" v-if="!item.status" class="see">
              <el-icon>
                <CirclePlus />
              </el-icon>
            </button>
          </td>
        </tr>
        <tr>
          <td class="contentStyle" colspan="3">
            <el-text line-clamp="5" v-if="item.status">
              {{ item.detail }}
            </el-text>
            <span v-else>无</span>
          </td>
        </tr>
      </table>
    </div>

    <!-- 抽屉 -->
    <el-drawer v-model="drawer" :direction="direction" size="600px" style="background-color: rgb(212 234 244);">
      <template #header>
        <h4>详情如下</h4>
      </template>
      <template #default>
        <table class="tableDetail">
          <tr>
            <td class="left">编号</td>
            <td class="right">{{ detail.eid }}</td>
            <td class="left">姓名</td>
            <td class="right">{{ detail.name }}</td>
          </tr>
          <tr>
            <td class="left">部门</td>
            <td class="right">{{ detail.department }}</td>
            <td class="left">职位</td>
            <td class="right">{{ detail.position }}</td>
          </tr>
          <tr>
            <td colspan="4" class="fazhan">职业发展规划
              <button @click="edit" v-show="idBtnEdit"><el-icon>
                  <Edit />
                </el-icon></button>
            </td>
          </tr>
          <tr>
            <td colspan="4" class="content">
              <textarea v-model="detail.detail" rows="19" :disabled="isEdit"></textarea>
            </td>
          </tr>
        </table>
      </template>

      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">取消</el-button>
          <el-button type="primary" @click="save(detail.id, detail.detail)">保存</el-button>
        </div>
      </template>
    </el-drawer>
  </div>

  <!-- 分页 -->
  <br>
  <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[3, 7, 12, 30]"
    :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
    :total="planTotal" pager-count="4" default-page-size="12" @size-change="handleSizeChange"
    @current-change="handleCurrentChange" style="float: right;" />
</template>


<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import type { ComponentSize, DrawerProps } from 'element-plus'
import { MoreFilled, View, Edit, CirclePlus, Search, Platform } from '@element-plus/icons-vue'
import { useProfessionalStore } from '../../stores/modules/professional.js'   // 导入

// 获取数据
const professionalStore = useProfessionalStore()   // 调用store实例
// 进入页面时加载的数据
const plans = ref([])  // 总表
const pds = ref({})  // 部门职位数据
const planTotal = ref()  // 总数
onMounted(async () => {
  await professionalStore.fetchDevelopPlanAll()
  plans.value = professionalStore.developPlans.develop  
  planTotal.value = professionalStore.developPlans.total
  pds.value = professionalStore.pdNames.pdName

  console.log('1pds',pds.value)
  console.log('2plans',plans.value);
  console.log('3plantotal',planTotal.value);
})


// 头部搜索筛选
// 部门职位
const bumenzhiwei = ref('')
const seBumen = ref('') // 搜索部门
const seZhiwei = ref('') // 搜索职位
const props = {
  checkStrictly: true,
}
// 获取部门职位数组
const options = computed(() => {
  return Object.keys(pds.value).map(department => ({
    value: department,
    label: department,
    children: pds.value[department].map(position => ({
      value: position,
      label: position
    }))
  }));
});


const seName = ref('') // 搜索姓名
// 开关
const value1 = ref(true)
const text1 = ref('已规划')
const text2 = ref('未规划')
// 筛选
const filteredPlans = computed(() => {
  const newPlans = ref([])
  newPlans.value = plans.value

  // 筛选部门职位
  if (Array.isArray(bumenzhiwei.value) && bumenzhiwei.value.length > 0) {
    if (bumenzhiwei.value.length == 2) {
      seBumen.value = bumenzhiwei.value[0]
      seZhiwei.value = bumenzhiwei.value[1]
      newPlans.value = newPlans.value.filter(item => item.department.toLowerCase().includes(seBumen.value.toLowerCase()));
      newPlans.value = newPlans.value.filter(item => item.position.toLowerCase().includes(seZhiwei.value.toLowerCase()));
    }
    else {
      seBumen.value = bumenzhiwei.value[0]
      seZhiwei.value = '';
      newPlans.value = newPlans.value.filter(item => item.department.toLowerCase().includes(seBumen.value.toLowerCase()));
    }
  } else {
    seBumen.value = '';
    seZhiwei.value = '';
  }

  // 筛选姓名
  if (seName.value) {
    newPlans.value = newPlans.value.filter(item => item.name.toLowerCase().includes(seName.value.toLowerCase()));
  }

  // 过滤已执行和未执行
  console.log(value1.value, 'value')
  if (!value1.value) {
    // 如果开关处于 text1 状态，显示已完成数据
    newPlans.value = newPlans.value.filter(item => !item.status);
  } else {
    // 如果开关处于 text2 状态，显示未完成数据
    newPlans.value = newPlans.value.filter(item => item.status);
  }

  // 计算当前页显示的数据
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;

  planTotal.value = newPlans.value.length
  return newPlans.value.slice(start, end);
});

// 数据展示
const detail = ref({
  "id": 0,
  "detail": "",
  "status": 1,
  "name": "",
  "department": "",
  "position": "",
  "eid": 0
})

// 抽屉
const drawer = ref(false)
const direction = ref<DrawerProps['direction']>('rtl')
function cancelClick() {
  drawer.value = false
}

// 查看详情
const seeDetail = async (id) => {
  drawer.value = !drawer.value  // 展示抽屉
  idBtnEdit.value = true // 显示编辑图标
  isEdit.value = true // 编辑状态为无法编辑
  await professionalStore.seeDetail(id)
  detail.value = professionalStore.developPlansDetail
  console.log(id);
  console.log(detail.value, 'detail')

}

// 编辑
const isEdit = ref(false)
const edit = () => {
  isEdit.value = false
}

// 添加
const idBtnEdit = ref(true)
const add = async (id) => {
  drawer.value = !drawer.value  //显示抽屉
  isEdit.value = false  // 启动编辑
  idBtnEdit.value = false   // 隐藏按钮
  await professionalStore.seeDetail(id) // 获取数据
  detail.value = professionalStore.developPlansDetail
}

// 保存 
const save = async (id, detail) => {
  const data = ref({
    id: id,
    detail: detail
  })
  await professionalStore.save(data)
  plans.value = professionalStore.developPlans.develop; // 更新响应式变量,不更新的话就得刷新一次页面才能显示

}


// 分页
const currentPage = ref(1)
const pageSize = ref(12)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

</script>


<style scoped>
/* 头部栏 */
.title {
  width: 100%;
  height: 40px;
  /* 不换行 */
  white-space: nowrap;
}

.title .name {
  margin-left: 80px;
}

.title .switch {
  margin-left: 100px;
}


.card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.card-item {
  width: 270px;
  height: 150px;
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); */
  background-color: rgba(116, 142, 222, 0.2);
  border-radius: 5px;
  /* color: rgb(3, 17, 46); */
}

.card-item:hover {
  background-color: rgba(42, 85, 215, 0.2);
}

.card-item table {
  width: 100%;
  padding: 3px;
}

.card-item .idStyle,
.card-item .nameStyle {
  font-size: 20px;
  font-weight: 600;
}

.card-item .dianStyle {
  width: 30px;
}

.card-item .contentStyle {
  font-weight: 200;
  font-size: 14px;
  padding: 8px;
}

.see {
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%
}

.see:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* 抽屉表格样式 */
.tableDetail {
  width: 100%;
  /* border-collapse: collapse;  */

}

.tableDetail td,
.tableDetail tr {
  border: 2px solid rgb(133, 174, 213);
  /* 设置边框样式 */
  padding: 5px;
}

.tableDetail .left,
.tableDetail .fazhan {
  background-color: rgb(158, 217, 239);
  font-size: 18px;
  font-weight: 550;
  text-align: center;
}

.tableDetail .left {
  width: 80px;
}

.tableDetail .fazhan button {
  background-color: transparent;
  border: none;
  float: right;
  font-size: 20px;
}

.tableDetail .fazhan button :hover {
  background-color: rgb(62, 175, 215);
}

.tableDetail .content {
  height: 320px;
}

/* 文本域 */
textarea {
  background-color: transparent;
  border: none;
  width: 100%;
  font-size: 15px;
}
</style>